<template>
  <div id="main">
    <el-form ref="ruleForm2" :model="loginInfo" :rules="rules" label-width="100px" class="demo-ruleForm">
      <h2>医师登录界面</h2>
      <el-form-item label="用户名" prop="account">
        <el-input type="text" v-model="loginInfo.username" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pword">
        <el-input type="password" v-model="loginInfo.password" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button>重置</el-button>
        <el-button>注册</el-button> 
        <el-button @click="cut">管理员></el-button> 
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

let router = useRouter()

let loginInfo = reactive({
  username: 'ss',
  password: ''
})

// 表单验证规则
const rules = reactive({
  // account: [
  //   { required: true, message: '请输入账号', trigger: 'blur' },
  //   // { min: 5, max: 24, message: '账号长度在6-24位之间', trigger: 'blur' },
  // ],
  // pword: [
  //   { required: true, message: '请输入密码', trigger: 'blur' },
  //   // { min: 5, max: 24, message: '账号长度在6-24位之间', trigger: 'blur' },
  // ]
})

const submitForm = () => {
  const {username,password} = loginInfo
  // login().then(res => {
    
  //   if(res.data.Code == 100){
  //     alert('登录成功！')
  //   }else{
  //     alert('登录失败！')
  //   }
  // })
  alert('医师登录')
}

const cut = ()=> {
  router.push('/adminLogin')
}


</script>

<style lang="less" scoped>
#main {
  height: 100vh;
  position: relative;
  background-image: url(../assets/images/bg.a35a0ecc.jpg);

  .el-form {
    width: 450px;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: aliceblue;
    padding: 20px;

    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
</style>